<template>
  <div class="layout_container">
    <!-- 左侧菜单 -->
    <div class="layout_slider">
      <!-- logo组件 -->
      <Logo></Logo>
      <Menu></Menu>
    </div>
    <!-- 顶部菜单 -->
    <div class="layout_header">
      <Header></Header>
    </div>
    <!-- 内容区域 -->
    <div class="layout_main">
      <Main></Main>
    </div>
  </div>
</template>

<script setup lang="ts">
import Logo from '@/views/layout/Logo.vue'
import Menu from '@/views/layout/Menu.vue'
import Header from '@/views/layout/Header.vue'
import Main from '@/views/layout/Main.vue'
</script>

<style scoped lang="scss">
.layout_container {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #e0f3f8;

  .layout_slider {
    width: 260px;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #28414a;
  }

  .layout_header {
    width: calc(100% - 260px);
    height: 50px;
    position: absolute;
    top: 0px;
    left: 260px;
  }

  .layout_main {
    width: calc(100% - 260px);
    height: calc(100vh - 50px);
    position: absolute;
    top: 50px;
    left: 260px;
  }
}
</style>
